<template>
	<view class="home-search">
		<!-- 输入框 -->
		<view class="input-search">
			<uni-search-bar v-model="searchValue" radius="100" cancelButton="none" @blur="searchInput('2')"
				placeholder="多条件搜索请用空格间隔" />
		</view>
		<!-- 项目 -->
		<view class="project-materials">
			<view class="head-whole" @click="clickMateria('1',searchValue)">
				<view class="name-td">项目</view>
				<view class="whole-text">
					<text>全部({{ projectTotal }})</text>
					<uni-icons type="right" size="16" color="#a8a8a8" />
				</view>
			</view>
			<!-- 项目数据 -->
			<view class="back-padding">
				<view class="data-forModle" @click="clickModle(item)" v-for="(item,index) in projectList"
					:key="item.prjCode">
					<view class="head-name">
						<view class="image-name">
							<image class="head-image" src="http://106.14.56.171:15016/images/u425.png" />
							<text>{{item.prjName}}</text>
						</view>
						<view class="tag-padding">
							<image src="http://106.14.56.171:15016/images/u3063.png"></image>
						</view>
					</view>
					<view class="theme-flex">
						<view class="prjtypeText">
							<text v-if="item.prjType !=4">{{item.serviceCode_Zn}}</text>
							<!-- 船舶环氧 -->
							<text v-if="item.prjType ==4">{{item.serviceCode_Zn}}</text>
						</view>

						<fileImage :src="item.coverPicUrl" :className="['theme-image']" />
						<view class="theme-rigth">
							<view class="name-text">
								<text class="name-key">服务方</text>
								<text class="name-value">{{item.serviceSeller_Zn}}</text>
							</view>
							<view class="name-text">
								<text class="name-key">业主方</text>
								<text class="name-value">{{item.serviceOwner}}</text>
							</view>
							<view class="name-text" v-if="item.serviceOwner!=item.serviceBuyer">
								<text class="name-key">委托方</text>
								<text class="name-value">{{item.serviceBuyer}}</text>
							</view>


							<view class="threeStates">
								<view>
									<text>{{item.prjStatus_Zn}}</text>
									<text class="viewType"
										v-if="(item.prjStatus_Zn =='施工中' || item.prjStatus_Zn =='暂停中' )&&item.prjType !='4' ">{{item.realityHours}}%</text>
								</view>
								<view class="grey" v-if="item.prjType !=4 &&item.invoiceStatus == 0">
									<text v-if="item.invoiceStatus == 0">未开票</text>
								</view>
								<view class="viewType" v-if="item.prjType !=4&&item.invoiceStatus != 0">
									<text>{{item.invoiceStatus == 1?'部分开票':item.invoiceStatus == 2?'全额开票':''}}</text>
								</view>
								<view class="viewType" v-if="item.prjType !=4&&item.settleStatus != 0">
									<text>{{item.settleStatus == 1?'部分回款':item.settleStatus == 2?'全额回款':''}}</text>
								</view>

								<view v-if="item.prjType !=4&&item.settleStatus == 0" class="grey">
									<text v-if="item.settleStatus == 0">未回款</text>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="no-data-show" v-show="projectShow">
					没有更多了···
				</view>
			</view>
		</view>
		<!-- 材料 -->
		<view class="project-materials">
			<view class="head-whole" @click="clickMateria('2',searchValue)">
				<view class="name-td">材料</view>
				<view class="whole-text">
					<text>全部({{ materialTotal }})</text>
					<uni-icons type="right" size="16" color="#a8a8a8" />
				</view>
			</view>
			<!-- 材料数据 -->
			<view class="back-padding">
				<view class="data-forModle" @click="clickDateil(item)" v-for="(item,index) in materialList"
					:key="item.materialCode">
					<view class="head-name">
						<view class="image-name image-name-active">
							<image class="head-image" src="http://106.14.56.171:15016/images/u425.png" />
							<text>{{item.materialName}}</text>
						</view>
					</view>
					<view class="theme-flex">
						<fileImage :src="item.coverUrl" :className="['theme-images']" />
						<view class="theme-rigths">
							<view class="name-text">
								<text class="name-key">分类</text>
								<text class="name-value">{{item.materialType}}</text>
							</view>
							<view class="name-text">
								<text class="name-key">品牌</text>
								<text class="name-value">{{item.materialBrand}}</text>
							</view>

						</view>
					</view>
				</view>
				<view class="no-data-show" v-show="materialShow">
					没有更多了···
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	export default {
		data() {
			return {
				active: false,
				searchValue: '', // 搜索条件
				project: {
					pageNo: 1, // 页码
					pageSize: 3, // 条数
					descStr: '1', // 
					prjSort: 2
				}, // 项目请求数据
				material: {
					pageNo: 1, // 页码
					pageSize: 3, // 条数
				}, // 材料请求数据 
				projectList: [{
					prjSort: 2,
				}], // 项目数据
				projectTotal: 0, // 项目总数
				projectShow: false, // 项目为空
				materialList: [], // 材料数据 
				materialTotal: 0, // 材料总数
				materialShow: false, // 材料为空
			}
		},
		onLoad() {
			this.materialScience()
			this.projectScience()
			// uni.hideKeyboard()
		},
		components: {
			fileImage
		},
		methods: {
			/**
			 * 时间： 2022/7/28，An
			 * 功能： 获取材料数据
			 * 接口:  'api/Materials/GetMaterialsList'，
			 * 参数： ...this.material,this.searchValue
			 */
			materialScience() {
				this.$http.post('api/Materials/GetMaterialsList', {
					...this.material,
					searchValue: this.searchValue
				}).then((res) => {
					console.log(res, '-----------------')
					if (Array.isArray(res.items)) {
						this.materialList = res.items
						this.materialTotal = res.totalCount
						this.materialShow = res.items.length <= 0 ? true : false
					}
				})
			},
			/**
			 * 时间： 2022/7/28，An
			 * 功能： 获取项目数据
			 * 接口:  'api/Project/GetProjectAndEpoxyList'，
			 * 参数： ...this.project,this.searchValue
			 */
			projectScience() {
				this.$http.post('api/Project/GetProjectAndEpoxyList', {
					...this.project,
					searchValue: this.searchValue
				}).then((res) => {
					console.log('首页搜索', res.items)
					if (!Array.isArray(res.items)) return


					// 进度条判断
					res.items = res.items.map(code => {
						let percentage = 0 // 项目进度
						// 状态 2 施工中,3 暂停,6终止用 实际/限额 如果结果大于100 用99
						if (['2', '3', '6'].includes(code.prjStatus)) {
							if (code.planHours <= 0) percentage = 0
							else {
								let numTage = (code.realityHours / code.planHours)*100
								console.log(numTage, '---------------------------------')
								if (Number(numTage) >= 100) percentage = 99
								else if (Number(numTage) < 1) percentage = 1
								else percentage = Math.trunc((numTage))
							}
						} else if (['0', '1'].includes(code.prjStatus)) {
							// 状态为  0或者1 直接为0
							percentage = 0
						} else {
							// 其他为100
							percentage = 100
						}
						return {
							...code,
							realityHours: percentage,
						}
					})
					if (Array.isArray(res.items)) {
						this.projectList = res.items
						this.projectTotal = res.totalCount
						this.projectShow = res.items.length <= 0 ? true : false
					}



				})
			},
			// 初始化数据
			init() {
				this.projectList = []
				this.projectTotal = 0
				this.materialList = []
				this.materialTotal = 0
			},
			// 输入框或者点击搜索
			searchInput(code, item) {
				console.log('--------', code, item);
				this.active = true
				switch (code) {
					// 输入框
					case '1':
						let {
							value
						} = item.detail
						if (value == '') {
							this.active = false
							this.init()
							this.materialScience()
							this.projectScience()
						}
						break;
						// 搜索
					case '2':
						this.init()
						this.materialScience()
						this.projectScience()
						break;
						// 其他
					default:
						uni.showToast({
							title: '没有此类型！',
							icon: 'none'
						})
				}
			},
			// 去项目或者材料跳转
			clickMateria(code, searchValue) {
				console.log('搜索条件', code, searchValue);
				switch (code) {
					// 项目
					case '1':
						uni.navigateTo({
							url: '/pages/project/project_copy?searchValue=' + this.searchValue
						})
						break;
						// 材料
					case '2':
						uni.navigateTo({
							url: '/pages/material/index?searchValue=' + this.searchValue
						})
						break;
						// 其他
					default:
						uni.showToast({
							title: '没有此类型！',
							icon: 'none'
						})
				}
			},
			// 项目详情
			clickModle(item) {
				console.log('陈征', item.invoiceStatus, item.settleStatus);
				//判断是否环氧项目
				if (item.prjType != '4') {
					uni.navigateTo({
						url: `/pages/project/project_detail/project_detail?id=${item.prjInfoId}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/epoxyfile/index?id=${item.prjInfoId}`
					});
				}
			},
			// 材料详情
			clickDateil(item) {
				uni.navigateTo({
					url: `/pages/material/materialdetail?id=${item.materialId}`
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.home-search {
		height: 100%;

		.input-search {
			position: sticky;
			/* #ifndef MP-WEIXIN */
			top: calc(44px + env(safe-area-inset-top));
			/* #endif */
			/* #ifndef H5 */
			top: 0px;
			/* #endif */
			z-index: 9999;
			// background-color: #fff;
		}

		.project-materials+.project-materials {
			margin: 28rpx 20rpx 20rpx 30rpx;
		}

		.project-materials {
			margin-top: 28rpx;
			margin-left: 20rpx;
			margin-right: 30rpx;

			.head-whole {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name-td {
					color: #b6001f;
					font-size: 30rpx;
					font-weight: bold;
					position: relative;
					padding-left: 20rpx;
				}

				.whole-text {
					font-size: 28rpx;
					color: #a8a8a8;

					text {
						padding-right: 10rpx;
					}
				}

				.name-td::after {
					position: absolute;
					background-color: #b6001f;
					left: 0;
					top: 12rpx;
					width: 6rpx;
					height: 26rpx;
					border-radius: 20rpx;
				}
			}
		}

		.back-padding {
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 10rpx;

			.no-data-show {
				padding: 20rpx 0;
				text-align: center;
				color: #9e9e9e;
			}
		}

		.data-forModle+.data-forModle {
			border-top: 2rpx solid #ddd;
		}

		.data-forModle {
			padding: 28rpx 0;
			font-size: 26rpx;

			.head-name {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.image-name {
					display: inline-block;
					font-weight: bold;
					width: 80%;

					.head-image {
						height: 40rpx;
						width: 40rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}

				.image-name-active {
					width: 100%;
				}

				.tag-padding {
					// background-color: #ecf4f0;
					padding: 2rpx 20rpx;

					>image {
						width: 10rpx;
						height: 20rpx;
					}
				}
			}

			.theme-flex {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				// background-color: aqua;

				.theme-rigth {
					width: 70%;
					// background-color: aqua;

					.name-text {
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						margin-top: 6rpx;

						.name-key {
							margin-right: 10rpx;
							color: #9e9e9e;
						}
					}

					.speed-progress {
						display: flex;
						align-items: center;
						color: #419b9f;

						.speed-left {
							background-color: #ff180b;
							width: 60%;
							height: 8rpx;
							border-radius: 10rpx;
						}

						.speed-right {
							width: 30%;
							height: 8rpx;
							background-color: #e2e2e2;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.threeStates {
			display: flex;
			width: 100%;
			height: 35rpx;
			margin-top: 10rpx;

			// background-color: aqua;
			>view {
				padding: 0 20rpx 0 20rpx;
				background-color: #ecf4f0;
				border-radius: 80rpx;
				font-size: 24rpx;
				color: #3E9265;
				line-height: 35rpx;
				text-align: center;
			}

			.grey {
				background-color: #F4F4F4;
				// background-color: red;
				color: #A0A0A0;
				margin-left: 10rpx;
			}

			.viewType {
				margin-left: 10rpx;
			}
		}



		.theme-rigths {
			width: 70%;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			// background-color: red;

			.name-text {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;

				.name-key {
					margin-right: 20rpx;
					color: #9e9e9e;
				}
			}
		}

		.uni-input-placeholder {
			font-size: 12px;
			color: #e0e0e0;
			;
		}
	}

	.cehna {
		margin-top: 10rpx;

		>text:nth-child(1) {
			color: #adadad;
		}
	}

	.prjStatus {

		.prjStatus-type,
		.prjStatus-status {
			display: inline-block;
			background-color: #fbe9ec;
			height: 40rpx;
			width: 140rpx;
			font-size: 12px;
			border-radius: 20rpx;
			text-align: center;
			line-height: 40rpx;
			color: #DC143C;
			margin-right: 5px;

		}
	}

	.prjtypeText {
		position: absolute;
		width: 115rpx;
		background-color: #B5001F;
		z-index: 9;
		padding: 0 0 10rpx 10rpx;

		>text {
			font-size: 20rpx;
			color: #FFFFFF;
		}

		border-radius:15rpx 0 0 0;
	}
</style>
<style lang="scss">
	.home-search {
		.theme-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;

		}

		.theme-images {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}


		.uni-searchbar {
			padding: 10rpx 20rpx;
		}
	}
</style>
